<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
        <title>习题解析</title>
        <!-- 引入样式文件 -->
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>

        <!-- 引入 Vue 和 Vant 的 JS 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
        <script src="../public/js/menu/axios.min.js"></script>

        <style type="text/css">
            .select-group {
                padding-top: 1rem;
                padding-left: 1rem;
                padding-right: 1rem;
                padding-bottom: 0.05rem;
                margin: 0.1rem;
                font-size: 12px;
            }
            .drive-hr {
                width: 95%;
                margin-right: 0;
                -webkit-transform: scaleY(.1);
                transform: scaleY(.1);
            }
            .van-radio__label {
                color: #999999 !important
            }
            .page-no {
                margin-right: 10px;
                width: 50px;
                color: #576b95;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background-color: rgba(87,107,149,0.1);;
            }
        </style>
    </head>
    <body ontouchstart="">
        <div id="app">
            <van-tabs swipeable>
                <van-tab v-for="(subject, index) in subjectList" :title="subject.subjectName">
                    <van-radio-group class="select-group" v-model="selectRadioVersion[index]"
                                     direction="horizontal">
                        <van-radio v-for="version in versionListShow[index]" :name="version.id" checked-color="#808080" icon-size= "12px">
                            {{version.name}}
                        </van-radio>
                    </van-radio-group>
                    <hr class="drive-hr"/>
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了">
                        <van-cell
                                v-for="video in subjectVersionVideoMap[subject.subjectId][selectRadioVersion[index]]"
                                is-link
                                title-class="title-ext-class"
                                :url="'./video_detail.html?id=' + video.id + '&userFrom=5'"
                                :title="video.videoName">
                            <slot  slot="icon">
                                <p class="page-no">
                                    <b>{{video.pageNo}}</b>
                                    <span style="font-size:10px">页</span>
                                </p>
                            </slot>
                            <slot  slot="right-icon">
                                <van-icon name="arrow" style="margin-top: 8%" />
                            </slot>
                        </van-cell>
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>
    </body>
    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',
            created() {
                function getQueryVariable(variable) {
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                    }
                    return(false);
                }
                this.gradeId = getQueryVariable("gradeId")
                this.getSubjectList()
                this.getVersionList()
                this.getDefaultVersion()
                this.getVideoList()
                this.getUserInfo()
            },
            data: {
                baseUrl: 'http://dx.ex.adp5.com.cn/ex/person/menu',
                gradeId: 36,
                versionTitle: [],
                subjectList: [],
                versionList: [],
                defaultVersion: {},
                versionListShow: {},
                selectRadioVersion: [1,1,1,1,1,1,1,1,1,1,1],
                subjectVersionVideoMap: [],
                loading: false,
                finished: false
            },
            methods: {
                getUserInfo() {
                    axios.get('http://dx.ex.adp5.com.cn/ex/api/home/getUserInfo')
                        .then(r => {
                            console.log(r.data.userId)
                            this.sendLog(r.data.userId)
                        })
                },
                sendLog(userId) {
                    axios.get('https://jzxl.cn-qingdao.log.aliyuncs.com/logstores/custom-menu/track?APIVersion=0.6.0', {
                        params: {
                            userId: userId,
                            gradeId: this.gradeId,
                            type: '3' // 进入页面
                        }
                    })
                },
                // 1. 根据年级获取科目列表
                getSubjectList() {
                    const that = this
                    axios.get(this.baseUrl + '/subject/list', {
                        params: {
                            gradeId: this.gradeId
                        }
                    })
                        .then(function (response) {
                            console.log(response);
                            if (response.status === 200 && response.data.code == 0) {
                                that.subjectList = response.data.subjectList
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                // 3. 获取默认教版
                getDefaultVersion() {
                    const that = this
                    axios.get(this.baseUrl + '/default/version/' + this.gradeId)
                        .then(function (response) {
                            console.log("====默认教版======")
                            console.log(response);
                            if (response.status === 200 && response.data.code == 0) {
                                that.defaultVersion = response.data.result
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                // 2.获取教版信息
                getVersionList() {
                    const that = this
                    axios.get(this.baseUrl + '/version/list')
                        .then(function (response) {
                            console.log("====教版列表======")
                            console.log(response);
                            if (response.status === 200 && response.data.code == 0) {
                                that.versionList = response.data.versionList
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                // 3.获取视频信息
                getVideoList() {
                    const that = this
                    axios.get(this.baseUrl + '/video/list', {
                        params: {
                            gradeId: that.gradeId
                        }
                    })
                        .then(function (response) {
                            console.log("-----视频列表------")
                            console.log(response);
                            if (response.status === 200 && response.data.code == 0) {
                                that.subjectVersionVideoMap = response.data.subjectVersionVideoMap
                                const subjectKeys = Object.keys(response.data.subjectVersionVideoMap)
                                const versionListTemp = []
                                const subjectIds = that.subjectList.map(s=>s.subjectId.toString())
                                for (let i = 0; i < subjectKeys.length; i++) {
                                    versionKeys = Object.keys(response.data.subjectVersionVideoMap[subjectKeys[i]])
                                    const versionSelectList = that.versionList
                                        .filter(v => versionKeys.includes(v.id.toString()))
                                    const subjectIndex =  subjectIds.indexOf(subjectKeys[i])
                                    versionListTemp[subjectIndex] = versionSelectList
                                    const defaultVersionId = that.defaultVersion[subjectKeys[i]];
                                    if(defaultVersionId){
                                        that.selectRadioVersion.splice(subjectIndex,1,defaultVersionId)
                                    } else {
                                        that.selectRadioVersion.splice(subjectIndex, 1,versionSelectList[0].id)
                                    }
                                }
                                that.versionListShow = versionListTemp
                                that.loading = true;
                                that.finished = true;
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });
        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);
    </script>
</html>
